<template>
  <div class="flex-col-center-start">
    <div :style="{width: width,height: height}">
      <vueCropper
          ref="cropper"
          :img="src"
          :outputSize="option.outputSize"
          :outputType="option.outputType"
          :info="option.info"
          :canScale="option.canScale"
          :autoCrop="option.autoCrop"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :fixedBox="option.fixedBox"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :centerBox="option.centerBox"
          :infoTrue="option.infoTrue"
          :full="option.full"
          :enlarge="option.enlarge"
          :mode="option.mode"
          @realTime="handleRealTime"
      ></vueCropper>
    </div>
    <div class="flex-row-between">
      <el-button text @click="rotateLeft">↺ 左旋转</el-button>
      <el-button text @click="rotateRight">↻ 右旋转</el-button>
    </div>
  </div>


</template>

<script setup lang="ts">
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";
import {reactive, ref,  defineProps, withDefaults, watch,defineEmits} from "vue";
import {blobToDataURI} from "@/utils/FileUtil";


let props = withDefaults(defineProps<{
  width:string,
  height:string
  src:string
  scale:number[],
  resize?:boolean
}>(),{
  width:"100px",
  height:"100px",
  resize:true,
  scale:()=>[1,1]
})

let emit = defineEmits<{
  (e:"crop",val:CropBlob):void
}>()
const cropper=ref()

let option=reactive( {
  img: '', // 裁剪图片的地址 url 地址, base64, blob
  outputSize: 1, // 裁剪生成图片的质量
  outputType: 'jpeg', // 裁剪生成图片的格式 jpeg, png, webp
  info: true, // 裁剪框的大小信息
  canScale: true, // 图片是否允许滚轮缩放
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 150, // 默认生成截图框宽度
  autoCropHeight: 150, // 默认生成截图框高度
  fixedBox: false, // 固定截图框大小 不允许改变
  fixed: true, // 是否开启截图框宽高固定比例
  fixedNumber: [1,1], // 截图框的宽高比例 [ 宽度 , 高度 ]
  canMove: true, // 上传图片是否可以移动
  canMoveBox: true, // 截图框能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: true, // 截图框是否被限制在图片里面
  infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  full: true, // 是否输出原图比例的截图
  enlarge: '1', // 图片根据截图框输出比例倍数
  mode: 'contain' // 图片默认渲染方式 contain , cover, 100px, 100% auto
})
watch(()=>props.scale,(newV)=>{
  option.fixedNumber=newV
},{immediate:true})
watch(()=>props.resize,(newV)=>{
  option.fixed=!newV
},{immediate:true})

export interface CropBlob{
  url:string
  data:Blob
}
function handleRealTime(data:any){

  cropper.value.getCropBlob((data:Blob) => {
    // 这里data数据为Blob类型，blobToDataURI方法转换成base64
    blobToDataURI(data, (res:string)=> {
      emit("crop",{
        url:res,
        data:data,
      })
    })

  })

}

//图片缩放
function changeScale (num:number) {
  // 放大比例
  num = num || 1
  cropper.value.changeScale(num)
}
//向左旋转
function rotateLeft () {
  cropper.value.rotateLeft()
}
//向右旋转
function rotateRight () {
  cropper.value.rotateRight()
}

</script>

<style scoped lang="less">

</style>